/**
* 绑定设备数/活跃设备数
*/

<template>
    <div class="device-bind-content">
        <div class="device-content">
            <div class="title">
                <span class="span-1">插件启动曲线及趋势图</span>
            </div>
            <slot name="timeSelect"></slot>
            <div v-auto-resize style="height: 460px;" ref="chartEl" class="chart-wrap" />
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import EchartsBase from '@/mixins/echarts-base'
import commonMixin from '@/mixins/common'
import AutoResize from '@/directive/echart-resizer'

let oChart
export default {
  name: 'ChartStageTrend',
  mixins: [EchartsBase, commonMixin],
  directives: {
    AutoResize
  },
  props: {
    pluginLaunchData: {
      type: Object
    }
  },
  watch: {
    pluginLaunchData (now, old) {
      if (now) {
        this.$nextTick().then(() => {
          oChart = echarts.init(this.$refs.chartEl)
          this.setOption(now)
        })
      }
    }
  },
  created () {

  },
  methods: {
    setOption (data) {
      if (data && data.plugin_PVUV && data.plugin_PVUV.length > 0) {
        let pluginPvuvArr = data.plugin_PVUV.sort(this.dateDataBol('Time', true))
        let xAxisDataList = []
        // 新增插件用户数 num_of_new_launch_users
        let numOfNewLaunchUsersArr = []
        // 插件启动用户数 num_of_unique_users
        let numOfUniqueUsersArr = []
        // 插件启动次数 pluginEntryTimes
        let pluginEntryTimes = []
        this._.each(pluginPvuvArr, (item) => {
          xAxisDataList.push(item.Time)
          numOfNewLaunchUsersArr.push(item.num_of_new_launch_users)
          numOfUniqueUsersArr.push(item.num_of_unique_users)
          pluginEntryTimes.push(item.plugin_entry_times)
        })
        let option = {
          grid: {
            top: '15%',
            bottom: '16%'
          },
          backgroundColor: '#ffffff',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
              label: {
                show: true
              }
            }
          },
          legend: {
            data: ['新增插件用户数', '插件启动用户数', '插件启动次数'],
            top: '2%',
            left: '10',
            textStyle: {
              color: '#2125296',
              fontSize: 16
            }
          },
          xAxis: {
            data: xAxisDataList,
            axisLine: {
              show: true, // 隐藏X轴轴线
              lineStyle: {
                color: '#E9EBF1',
                width: 2
              }
            },
            axisTick: {
              show: true // 隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              interval: 0,
              rotate: 40,
              textStyle: {
                color: '#212529', // X轴文字颜色
                fontSize: 16
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(250,250,250,0.1)', 'rgba(250,250,250,0)']
              }
            }
          },
          yAxis: [{
            name: '插件启动次数/插件启动用户数',
            'nameTextStyle': {
              'color': '#2CD9C5',
              'fontSize': 16
            },
            type: 'value',
            splitLine: {
              show: false
            },
            axisTick: {
              show: true
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#E9EBF1',
                width: 2
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#212529',
                fontSize: 16
              }
            }

          },
          {
            name: '新增用户数/人',
            'type': 'value',
            'nameTextStyle': {
              'color': '#2CD9C5',
              'fontSize': 16
            },
            'splitLine': {
              'show': false
            },
            'axisTick': {
              'show': true
            },
            'axisLine': {
              'show': true,
              'lineStyle': {
                'color': '#E9EBF1',
                'width': 2
              }
            },
            'axisLabel': {
              'show': true,
              'textStyle': {
                'color': '#212529',
                'fontSize': 16
              }
            }
          }
          ],
          series: [{
            name: '新增插件用户数',
            type: 'line',
            yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true, // 平滑曲线显示
            showAllSymbol: true, // 显示所有图形。
            symbol: 'circle', // 标记的图形为实心圆
            symbolSize: 8, // 标记的大小
            itemStyle: {
              // 折线拐点标志的样式
              color: '#2CD9C5',
              borderColor: '#2CD9C5',
              width: 2

            },
            lineStyle: {
              color: '#2CD9C5',
              width: 2

            },

            data: numOfNewLaunchUsersArr
          },
          {
            name: '插件启动用户数',
            type: 'bar',
            yAxisIndex: 0,
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#74DAC1'
                },
                {
                  offset: 1,
                  color: '#74DAC1'
                }
                ]),
                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#74DAC1'
                },
                {
                  offset: 1,
                  color: '#74DAC1'
                }
                ]),
                borderWidth: 2
              }
            },
            data: numOfUniqueUsersArr
          },
          {
            name: '插件启动次数',
            yAxisIndex: 0,
            type: 'bar',
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#758BFF' }, { offset: 1, color: '#758BFF' }]),
                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#758BFF' }, { offset: 1, color: '#758BFF' }]),
                borderWidth: 2
              }
            },
            data: pluginEntryTimes
          }
          ]
        }
        oChart.setOption(option)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";
    .device-bind-content{
        @include device-content;
        .chart-wrap {
            width: 100%;
            height: 100%;
        }
    }

</style>
